<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>在线聊天</title>
</head>
<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
<script src="http://47.106.66.89:8080/js/axios.min.js"></script>

<body>
<div id="app" style="height: 100%">
    <header class="p900 flexbtw">
        <h3>在线聊天、在线客服</h3>
        <div>
            欢迎 XXX
            <a href="#">退出</a>
        </div>
    </header>
    <main class="m900 flexbtw" style="height: calc(100% - 75px)">
        <aside>
            <div v-for="p in online">{{p}}</div>
        </aside>
        <article>
            <div id="msgs">
                <div v-for="m in msgs" :class="m.user == myName ? 'send' : 'recv'">
                    <label class="user">{{m.user}}</label>
                    <span class="msg" v-html="m.msg"></span>
                </div>

            </div>
            <textarea v-model="mymsg"  placeholder="Ctrl + Center 发送" id="msg" name="msg"></textarea>
            <div id="ops">
                <span class="emotion">表情</span>
                <input placeholder="用户名" v-model="myName">
                <button @click="login">登录</button>
                <button @click="send">发送</button>
            </div>
        </article>
    </main>
    <footer>源辰公司</footer>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.qqFace.js"></script>
<script>



    document.body.onpaste = function (e) {
        var clipboard = e.clipboardData;
        if (clipboard.items[0].type.match(/image/)) {
            let fd = new FormData();
            let blob = clipboard.items[0].getAsFile();
            let nm = "随机文件名.jpg"
            fd.append("file", blob, nm);
            axios.post("/upload/one/image", fd).then(res => {
                if (res.data) {
                    v.ws.send("img:" + res.data);
                }
            });
        }
    }


    $(function () {
        $('.emotion').qqFace({
            // id : 'facebox',
            //点击表情后表情符号绑定的输入框
            assign: 'msg',
            //表情存放的路径
            path: 'arclist/'
        });
    });
    //将表情符号替换为对应的表情图片(如果自定义文件路径需要重写第四个替换的路径)..


    var v = new Vue({
        el: "#app",
        data: {
            myName: "",
            online: [],
            mymsg: [],
            msgs: [],
            ws: null
        },
        methods: {

            login() {
                if (!this.myName) {
                    alert("请输入用户名！");
                }
                if (this.ws != null) {
                    alert("你已上线！");
                    return;
                }
                this.ws = new WebSocket("ws://localhost:8080/talk/" + this.myName);
                this.ws.onopen = (ev) => {
                    // console.log("opOpen", ev);
                };
                this.ws.onclose = (ev) => {
                    // console.info("onclose",ev);
                };
                this.ws.onmessage = (ev) => {
                    // console.info("onmessage",ev);
                    //数据转对象
                    var obj = JSON.parse(ev.data);
                    if (obj.onlineUser) {
                        this.online.push(obj.onlineUser);
                    }
                    if (obj.downlineUser) {
                        //过滤法移除下线用户
                        this.online = this.online.filter(user => user != obj.downlineUser);
                        // console.info(this.online);
                    }
                    if (obj.sendMsg) {
                        if (obj.sendMsg.indexOf("img:") == 0) {
                            // 图片消息
                            let url = obj.sendMsg.substring(4);
                            // 重新设置消息为图片格式
                            obj.sendMsg = `<img src="${url}" style="width: 200px">`;
                        } else {
                            // 处理表情替换
                            obj.sendMsg = this.replace_em(obj.sendMsg);
                        }

                        console.log(obj.sendMsg);

                        this.msgs.push({
                            user: this.myName,
                            msg: obj.sendMsg
                        });

                        this.mymsg = ''; // 发送消息后清空输入框
                    }

                };
            },
            send() {
                if (!this.myName) {
                    alert("请先登录");
                }
                if (!this.mymsg) {
                    alert("请输入消息");
                }
                this.ws.send(this.mymsg);
            },

            replace_em(str) {
                let processedMsg = str;
                processedMsg = processedMsg.replace(/\</g, '&lt;');
                processedMsg = processedMsg.replace(/\>/g, '&gt;');
                processedMsg = processedMsg.replace(/\n/g, '<br/>');
                processedMsg = processedMsg.replace(/\[em_([0-9*])\]/g, '<img src="arclist/$1.gif" border="0" />');

                return processedMsg;
            }

        },

    })

</script>
</html>


<style>
    * {
        padding: 0px;
        margin: 0px;
        font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    }

    html, body {
        height: 100%;
    }

    body {
        display: flex;
        flex-direction: column;
    }

    a {
        text-decoration: none;
    }

    button {
        padding: 3px 10px;
    }

    .p900 {
        padding: 0px calc((100% - 900px) / 2);
    }

    .m900 {
        width: 900px;
        margin: 0px auto;
    }

    .flexbtw {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    header {
        background-color: #eee;
        flex: none;
    }

    header > h3 {
        margin: 10px 0px;
    }

    main {
        flex: auto;
        background-color: #ddd;
    }

    footer {
        flex: none;
        padding: 5px;
        text-align: center;
        background-color: #eee;
    }

    aside {
        width: 200px;
        height: 100%;
        background-color: #ccc;
        flex: none;
    }

    article {
        height: 100%;
        flex: auto;
    }

    article {
        display: flex;
        flex-direction: column;
    }

    #msgs {
        flex: auto;
        box-sizing: border-box;
        padding: 10px;
    }

    #msg {
        flex: none;
        width: 100%;
        height: 100px;
        box-sizing: border-box;
    }

    .send > * {
        float: right;
    }

    .recv > * {
        float: left;
    }

    .send, .recv {
        clear: both;
        padding: 5px 0px;
    }

    .user, .msg {
        padding: 5px;
    }

    .msg {
        background-color: #e9e9e9;
        border-radius: 3px;
    }

    aside > div {
        text-align: center;
        padding: 10px;
        margin: 3px;
        background-color: #8c939d;
    }

    aside > div:hover {
        background-color: #8c939d55;
        cursor: pointer;
    }

    #ops {
        text-align: right;
        padding: 7px;
    }

    #ops > * {
        box-sizing: border-box;
        height: 25px;
        vertical-align: middle;
        margin: 0px 5px;
        text-align: center;
    }

    textarea {
        padding: 3px;
    }

    .qqFace {
        margin-top: -336px;
        background: #fff;
        padding: 2px;
        border: 1px #dfe6f6 solid;
    }

    .qqFace table td {
        padding: 0px;
    }

    .qqFace table td img {
        cursor: pointer;
        border: 1px #fff solid;
    }

    .qqFace table td img:hover {
        border: 1px #0066cc solid;
    }
</style>
